<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>fe-course-case1</title>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }

    header {
        position: fixed;

        top: 0;
        left: 0;
    }

    a {
        color: #000
    }

    section {
        width: 100%;
        height: 70vh;
        background: gray;
    }

    .part-one {
        background: gold;
    }

    .part-two {
        background: green;
    }

    .part-three {
        background: skyblue;
    }

    section h2, p {
        text-align: center;
    }

</style>

<body>
<header>
    <h1>页面导航示例</h1>
    <p><a href="#section1">跳转到第一部分</a></p>
    <p><a href="#section2">跳转到第二部分</a></p>
    <p><a href="#section3">跳转到第三部分</a></p>
</header>

<section class="part-one">
    <h2 id="section1">第一部分</h2>
    <p>这是页面的第一部分内容。</p>
</section>

<section class="part-two">
    <h2 id="section2">第二部分</h2>
    <p>这是页面的第二部分内容。</p>
</section>

<section class="part-three">
    <h2 id="section3">第三部分</h2>
    <p>这是页面的第三部分内容。</p>
</section>

</body>
</html>
